<template>
  <section>
    <div class="ticket-top-show">
      <p class="top-title">门票顶部信息</p>

      <el-form ref="form" :model="ticketTop" label-width="80px">

        <el-form-item label="农场名">
          <el-input type="text" v-model="farmName" readonly></el-input>
          <template>
            <input type="text" v-model="ticketTop.farm_id" style="display: none;"></input>
          </template>
          <template>
            <input type="text" v-model="ticketTop.id" style="display: none;"></input>
          </template>
        </el-form-item>

        <el-form-item label="农场须知">
          <el-input type="textarea" v-model="ticketTop.notice" :rows="4"></el-input>
        </el-form-item>

        <el-form-item label="banners">
          <template>
            <div class="p-listPic-upload">
              <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange($event, 1, -1)"></span>
            </div>
          </template>
          <template>
            <div v-for="(item, index) in ticketTop.banners" style="position: relative;">
              <div style="width: 500px;display: inline-block;">
                <el-input :value="item.pic" :key="index" auto-complete="on" style="margin-top: 5px;" readonly></el-input>
              </div>
              <div class="p-pic-upload" style="position: absolute;top: 5px;left: 510px;">
                <el-button type="success">修改<i class="el-icon-upload el-icon--right"></i></el-button>
                <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange($event, 2, index)"></span>
              </div>
            </div>
            <div style="margin-top: 20px;overflow: hidden">
              <img :src="item.pic" alt="" @click="deleteSelf(index)" v-for="(item, index) in ticketTop.banners" :key="index" style="width: 200px;height: 100px;margin-right: 5px;cursor: pointer;">
            </div>
          </template>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click.native="editTicket">立即创建</el-button>
        </el-form-item>

      </el-form>
    </div>
  </section>
</template>
<script type="text/ecmascript-6">
  import util from '../../util'
	import { apiTree } from '../../apiTree'
	
  export default {
    data() {
      return {
        ticketTop: {
          id: '0',
          farm_id: '1',
          notice: '',
          banners: []
        }
      }
    },
    computed: {
      farmName() {
        return this.ticketTop.farm_id === '1' ? '枫泾农场' : '其他'
      }
    },
    methods: {
      // 上传banner图片
      upInputOnchange(e, _type, index) {
        var _that = this;
        let file = e.target.files[0];
        let _reader = new FileReader();
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload/index', 'plant/upload', param).then((res) => {
            if (res.s === 1) {
              // 列表图片
              if (_type === 1) {
                _that.ticketTop.banners.push({'pic': res.d.url});
              }
              // 详情图片
              if (_type === 2) {
                _that.$nextTick(() => {
                  _that.ticketTop.banners[index].pic = res.d.url;
                });
              }
            }
          })
        }
      },
      // 编辑顶部banner
      editTicket() {
        let para = {};
        if (util.isEmpty(this.ticketTop.notice)) {
          this.$message.error('农场须知为空');
          return;
        }
        if (util.isEmpty(this.ticketTop.banners)) {
          this.$message.error('未上传banner');
          return;
        }
        para = util.cloneObj(this.ticketTop);
        apiTree('ticket/index', 'ticket/setTicketBanner', {'data': para}, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else {
            this.$message.error(res.err_str);
          }
        });
      },
      // 删除banner
      deleteSelf(_index) {
        this.ticketTop.banners.splice(_index, 1);
      },
      // 获得门票顶部展示图片
      getTicketBanner() {
        let param = {};
        apiTree('ticket/index', 'ticket/index', param).then((res) => {
          if (!util.isEmpty(res.d)) {
            this.ticketTop.banners = res.d.banners;
            this.ticketTop.farm_id = res.d.farm_id;
            this.ticketTop.notice = res.d.notice;
            this.ticketTop.id = res.d.id;
          }
        });
      }
    },
    created() {
      this.getTicketBanner();
    }
  }
</script>

<style type="text/css" media="screen">
  .ticket-top-show {
    width: 1000px;
  }
  .top-title {
    display: block;
    width: 100%;
    height: 40px;
    text-indent: 10px;
    line-height: 40px;
    font-size: 20px;
    color: #F78A73;
  }
  .p-listPic-upload {
    display: inline-block;
    margin-left: 10px;
    position: relative;
    cursor: pointer;
  }
  .upload_plant_pic {
    display: block;
    width: 80px;
    height: 35px;
    position: absolute;
    cursor:pointer;
    top: 0px;
    left: 0px;
    opacity: 0;
  }
  .upload_plant_pic input[type=file] {
    display: block;
    cursor: pointer;
    width: 80px;
    height: 35px;
  }
</style>